<template>
  <ga-layout class="layout_card">
    <ga-layout>
      <ga-layout-sider :style="{ width: widthL, marginRight: marginRight }">
        <!-- <slot name="search"></slot> -->
        <slot />
      </ga-layout-sider>
      <ga-layout-content>
        <slot name="content"></slot>
      </ga-layout-content>
    </ga-layout>
  </ga-layout>
</template>

<script setup>
import { ref } from "vue";
defineProps({
  widthL: {
    type: String,
    default: "288px",
  },
  marginRight: {
    type: String,
    default: "8px",
  },
});
// const emits = defineEmits(['handleCreate']);
// const handleCreate = () => {
//   emits('handleCreate');
// };
</script>

<style lang="scss" scoped>
.layout_card {
  height: calc(100vh - 134px);
  border-top: 1px solid #e2e8f4;
}
:deep(.garco-layout-sider) {
  box-shadow: none;
  padding-top: 16px;
  width: 340px;
}
:deep(.garco-layout-content) {
  box-shadow: none;
  padding-left: 8px;
  padding-top: 16px;
  border-left: 1px solid #e2e8f4;
}
</style>
